<div fxFlexFill fxLayout="row">
  <aside fxFlex="15%" fxLayout="column" class="box-station-list">
    <div class="bg" fxFlexFill fxLayout="column">
      <div class="box-station-list-farm" fxFlex="18%" fxLayout="column">
        <div class="title">{{currentFarm?.farmName}}</div>
        <div class="scrollbar">
          <p>总装机容量<i>(MW)</i><span>{{currentFarm?.capacity}}</span></p>
          <p>日发电量(万kWh)<span>{{currentFarm?.powerDay.value*ratio | number:'1.1-2'}}</span></p>
          <!--<p>总发电量(万kWh)<span>{{currentFarm?.communication.value*ratio | number:'1.1-2'}}</span></p>-->
          <p>有功功率(MW)<span>{{currentFarm?.totalPower.value | number:'1.1-2'}}</span></p>
          <p>辐射量(w/㎡)<span>{{currentFarm?.radiantQuantity.value | number:'1.1-2'}}</span></p>
          <!--<div class="phase" *ngFor="let phase of tempLimitedPhases let i =index">
            <p>{{phase.name}}并网有功P(MW)<span>{{phase?.GridMerPower.value | number:'1.1-2'}}</span></p>
            <p>{{phase.name}}并网无功Q(kVar)<span>{{phase?.GriReaPower.value | number:'1.1-2'}}</span></p>
            <p>{{phase.name}}日发电量(kWh)<span>{{phase?.powerDay.value | number:'1.1-2'}}</span></p>
          </div>-->
        </div>
      </div>

      <!--<div class="box-station-list-formInfo transformer-statu" fxFlex="20%" fxLayout="column">
        <div class="title"><b></b>设备状态(台)
        </div>
        <div class="scrollbar">
          <p *ngFor="let turbStatu of limitedTurbstatus let i =index " [ngStyle]="{'color':turbStatu.color}" [ngClass]="{'isChecked':turbStatu?.isChecked}"
            (click)="turbStatuClick($event,turbStatu)">
            <strong [ngStyle]="{'background-color':turbStatu.color}"></strong> {{turbStatu.name}}
            <span>{{turbStatu.tole}}</span>
          </p>
        </div>
      </div>-->
      <div class="box-station-list-formInfo stages" fxFlex="18%" fxLayout="column">
        <div class="title"><b></b>建设分期(台)
        </div>
        <div class="scrollbar">
          <div class="force-overflow">
            <p *ngFor="let phase of tempLimitedPhases let i =index" [ngClass]="{'isChecked':phase?.isChecked}" (click)="phaseClick($event,phase)">
              {{phase.name}}
              <span>{{phase.value}}</span>
            </p>
          </div>
        </div>
      </div>

      <!--<div class="box-station-list-formInfo circuit" fxFlex="44%" fxLayout="column">
        <div class="title"><b></b>集电线路(台)
        </div>
        <div class="scrollbar">
          <p *ngFor="let circuit of result let i =index" [ngClass]="{'isChecked':circuit?.isChecked}" (click)="circuitClick($event,circuit)">
            {{circuit.name}}
            <span>{{circuit.value}}</span>
          </p>
        </div>
      </div>-->
    </div>
  </aside>
  <section fxFlex="85%" fxLayout="column" class="box-station-list-right">
    <header>
      <app-farm-selector [farmId]="farmId" (currentFarmChange)="onChangeFarm($event)" [farmCategory]="farmCategory"></app-farm-selector>
    </header>
    <main class="scrollbar box-station-list-rl" #main>
      <!--类别-->
      <!--<div class="category">
        <span *ngFor="let item of operCategoryEnable;let i=index">
          <i [ngClass]="item.operCategoryIcon" [ngStyle]="{color:item?.operCategoryColor}"></i>
          {{item.operCategoryName}}
        </span>
      </div>-->
      <div class="scrollbar-trubineList" id="style-3">
        <div class="trubineList force-overflow-trubineList">
          <section class="transformer">
            <!--区域-->
            <!--<div class="region" *ngFor="let checkTransformerSubArray of allCheckTransformerSubArrayList;let i=index">
              <div class="regionName">{{checkTransformerSubArray[0].subArrayName}}</div>
              <div class="regionList">-->
                <p *ngFor="let item of allCheckTransformerList;let i=index">
                  <app-transformer class="inverter-content" 
                  (dblclick)="ondblclick(item.device)" 
                  [deviceName]="item.device.deviceName" 
                  [statusColor]="item.turbStatusColor"
                    [turbineStatus]="item.turbineStatus" 

                    [griPower]="item.griPower.value" 
                    [GriReaPower]="item.GriReaPower.value"
                    [GriCurA]="item.GriCurA.value"
                    [GriVolA]="item.GriVolA.value">
                  </app-transformer>
                </p>
              <!--</div>
            </div>-->

          </section>
        </div>
      </div>
      <div #op class="op" *ngIf="showDetail">
        <div>
        <i>{{currentBoxstation?.farmName}} {{currentBoxstation?.deviceName}} 详情</i>
        <span class="colse" (click)="onColse()"></span>
      </div>
        <app-device-detail 
        class="convergencebox-detail" 
        name="convergenceboxDetail" 
        [device]="currentBoxstation"
        [deviceNumber]=1>        
        </app-device-detail>
      </div>
    </main>
  </section>

</div>